import {View, Text, Image, StyleSheet, TextInput} from 'react-native';
import React from 'react';
import {fontSizeBase, grayLighter, themeColorDark} from '../style';

export default function Login() {
  return (
    <View style={ss.content}>
      {/* F1：顶部LOGO图片 */}
      <Image style={ss.logo} source={require('../img/logo.png')} />

      {/* F2：手机号输入框组 */}
      <View style={ss.inputGroup}>
        <TextInput style={ss.input} placeholder="请输入手机号" />
      </View>
      {/* F3：密码输入框组 */}
      {/* F4：登录按钮 */}
      {/* F5：忘记密码 */}
      <Text>Login2</Text>
    </View>
  );
}

//组件内部专用样式对象
let ss = StyleSheet.create({
  content: {
    //弹性容器中的子元素在交叉轴上对齐：居中
    alignItems: 'center',
  },
  logo: {
    //RN中的display取值只有flex或none
    // display: 'block',
    //RN中没有任何样式是“复合值”
    // margin: '0 auto',
    //水平margin = ml + mr
    // marginHorizontal: 'auto',
    marginTop: 120,
    //默认情况下，宽高比不会等比例缩放
    width: 280,
    height: 280,
  },
  inputGroup: {
    //定位方式：相对定位，为小图标提供参照物
    position: 'relative',
    marginTop: 40,
    width: '80%',
  },
  input: {
    backgroundColor: grayLighter,
    borderColor: themeColorDark,
    borderWidth: 1,
    borderStyle: 'solid',
    width: '100%',
    borderRadius: 5,
    //水平方向上的边距 = pl+pr
    paddingHorizontal: 40,
    fontSize: fontSizeBase,
  },
});
